<template>
  <div id="package_goods">
    <c-title :hide="false" :text="packageTitle"></c-title>
    <div id="content">
      <div class="banner" ref="banner">
        <van-swipe
          :autoplay="3000"
          indicator-color="#F15353"
          class="my-swipe"
          :width="fun.getPhoneEnv() == 3 ? 375 : clientWidths"
        >
          <van-swipe-item v-for="(item, index) in carousels" :key="index">
            <a :href="item.carousel_link" v-if="item.carousel_link">
              <img :src="item.carousel_thumb" alt="" />
            </a>
            <a  v-else>
              <img :src="item.carousel_thumb" alt="" />
            </a>
          </van-swipe-item>
        </van-swipe>
      </div>
      <template v-if="!page_template">
        <div class="content_a">
          <div class="rob-time" v-if="limit_time_status">
            <div class="img">
              <img src="../../assets/images/rob-time.png" width="16%;" />
            </div>
            <ul class="price">
              <li class="text">
                <span>限时<br />购买</span>
              </li>
              <!-- <li class="none-line"><small>{{$i18n.t('money')}}</small><b>3.2</b>&nbsp;/天</li>
                          <li class="middle-line"><small>{{$i18n.t('money')}}</small><b>3.2</b>&nbsp;/天</li> -->
            </ul>
            <div class="time">
              <span class="text">截至倒计时：</span>
              <van-count-down :time="fun.getTimeDifference(fun.getTimestamp(endTimeStr))" class="bottom_time" format="DD天HH时mm分ss秒" @finish="salePriceTime">
                <template #default="timeData">
                  <em style="padding: 0.125rem; border-radius: 0.125rem;"
                    >{{ timeData.days <10 ? `0${timeData.days}` :timeData.days}}</em
                  >天
                  <em style="padding: 0.125rem; border-radius: 0.125rem;"
                    >{{ timeData.hours <10 ? `0${timeData.hours}` :timeData.hours}}
                  </em>
                  <b>:</b>
                  <em style="padding: 0.125rem; border-radius: 0.125rem;"
                    >{{ timeData.minutes <10 ? `0${timeData.minutes}` :timeData.minutes}}
                  </em>
                  <b>:</b>
                  <em style="padding: 0.125rem; border-radius: 0.125rem;"
                    >{{ timeData.seconds <10 ? `0${timeData.seconds}` :timeData.seconds}}
                  </em>
                </template>
              </van-count-down>
            </div>
          </div>
        </div>

        <div class="header-main" ref="headerMain">
          <h3 class="ell">{{packageTitle}}</h3>
          <div class="header-desc ">
            <div class="flex-a-c flex-j-sb">
              <div class="header-user flex-a-c">
                <img :src="description_thumb" />
                <h3 class="ell">{{description_title}}</h3>
              </div>
              <div class="symbol flex-a-c">
                <span class="iconfont icon-yinhao"></span>
              </div>
            </div>
            <div class="detail">{{description_desc}}</div>
          </div>
        </div>
        <!-- 上边固定导航 -->
        <div class="content_nav" style="height: 44px;">
          <van-tabs
            id="categoryhei"
            :class="{ show: vanShow }"
            v-model="category_idex"
            @click="categoriesbtn"
            title-active-color="#00001C"
            title-inactive-color="#6E6E79"
            line-width="20px"
            :style="{ width: this.fun.getPhoneEnv() == 3 ? '21.875rem' : '' }"
          >
            <van-tab
              v-for="(item, i) in categories"
              :key="i"
              :title="item.category_names"
            ></van-tab>
          </van-tabs>
        </div>
      </template>

      <!-- 现代简约 -->
      <!--外面需要一个div保持圆角样式-->
      <div :class="page_template?'categories-page':''">
        <template v-for="(cateitem, cateidex) in categories" >
          <div :id="'cate_' + cateidex" class="content_c" :class="[page_template?'content-page':'']"  :key="cateidex" :style="{'margin-bottom': page_template? '0':'0.625rem'}">
            <h3 v-if="!page_template">{{ cateitem.category_names }}</h3>
            <div class="c_box" >
              <div
                class="goods_box"
                v-for="(goodsitem, goodsidex) in cateitem.goods_list"
                :key="goodsidex"
                @click.stop="showGoodPup(goodsitem.id)"
              >
                <div class="flex">
                  <div class="select flex-a-c flex-j-c" v-if="!page_template">
                    <van-checkbox v-model="goodsitem.checked" @change="categydbtn"
                      >&nbsp;</van-checkbox
                    >
                  </div>
                  <div class="goods_info">
                    <div class="info_a" :class="page_template?'info-page':''">
                    <div class="img" @click="gogoodsDetailBtn(goodsitem.id)">
                        <img
                          :src="
                            goodsitem.popThumb
                              ? goodsitem.popThumb
                              : goodsitem.thumb
                          "
                        />
                      </div>
                      <ul class="info" :class="page_template?'info-pm':''">
                        <li class="name" style="-webkit-box-orient: vertical;">
                          {{ goodsitem.title }}
                        </li>
                        <div class="flex-j-sb price-box">
                          <li class="price" v-if="!page_template">
                            <span class="left"
                              ><font>{{$i18n.t('money')}}</font>{{ goodsitem.popPrice }}</span
                            ><span class="right" v-show="parseInt(goodsitem.market_price)">{{$i18n.t('money')}}{{ goodsitem.market_price }}</span>
                          </li>
                          <li class="member" :style="{'margin-top': page_template? '10px':''}">
                            <span v-if="page_template">×</span>
                          <van-stepper
                              v-if="!page_template"
                              v-model="goodsitem.goodsnum"
                              :max="goodsitem.popStock"
                              @change="addnum"
                              @blur="addnum"
                            />
                            <template v-else>1</template>
                          </li>
                        </div>

                      </ul>
                    </div>
                  </div>
                </div>
                <div class="goods-specs flex-a-c flex-j-sb"  v-if="goodsitem.has_option == 1 && !page_template" @click="goodsSpescOn(goodsitem)">
                  <h4 >规格</h4>
                  <div class="specs-title">
                    <span>{{goodsitem.optionName || '请选择'}}</span>
                    <span class="iconfont icon-icon_more1"></span>
                  </div>
                </div>
                <div class="goods-line" v-if="page_template"></div>
                <div class="specs-40"  v-if="goodsitem.has_option != 1 && !page_template"></div>
              </div>

            </div>
          </div>
        </template>
      </div>

      <!-- 其他推荐 -->
      <div class="content_d" v-if="other_packages.length > 0">
        <h5>其他推荐</h5>
        <div class="d_box">
          <template v-for="(otherpitem, otherpidex) in other_packages">
            <div class="goods_box" @click="gopackgoods(otherpitem.id,otherpitem.type)" :key="otherpidex">
              <div class="img">
                <img :src="otherpitem.thumb" />
              </div>
              <ul class="info">
                <li class="info_a">{{ otherpitem.title }}</li>
                <li class="info_b">
                  推荐价：<span>{{$i18n.t('money')}}</span>{{ otherpitem.price_sum }}
                </li>
              </ul>
            </div>
          </template>
        </div>
      </div>
      <!-- 底部 -->
      <div class="fixed" :class="page_template?'fixed-exchange':''">
        <span class="favourable" v-if="sale_priceshow && on_sale_price"
          >已优惠：<span style="color: #f15353;">{{$i18n.t('money')}}{{ on_sale_price }}</span></span>
        <p class="price" v-if="!page_template">
          合计：<span><span>{{$i18n.t('money')}}</span>{{ zongjiage }}</span>
        </p>
        <button type="button" class="buyBtn"  :class="page_template?'exchange':''" @click="submitGoods">{{page_template?'立即兑换':'立即购买'}}</button>
      </div>
    </div>
    <!--商品规格-->
    <template >
      <yz-specs :goodsInfo="goodData" v-model="popupSpecs" v-on:closeSpecsPopup="close_yz_specs_popup"> </yz-specs>
    </template>
    <!-- 商品详情页弹窗 -->
    <yzGoodsPopup v-model="showgp" :goodsInfo="goodinfo" :addCartBtn='false' :roundShow="true" :showPrice="!page_template"></yzGoodsPopup>
  </div>
</template>

<script>
import package_goods_controller from "./package_goods_controller";

export default package_goods_controller;
</script>
<style scoped>
.content_nav ::v-deep .van-tabs__nav {
  background-color: transparent;
}
/* .content_nav ::v-deep  .van-tabs__nav--line {
  padding-bottom: 14px;
} */
.content_nav ::v-deep  .van-tabs__line {
  bottom:20px;
}
.select ::v-deep .van-checkbox__label {
  margin-left: 0;
}
.banner ::v-deep .van-swipe__indicator {
  background-color: #fff;
  opacity: 1;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>

.van-count-down {
  color: #fff;
}
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.specs-40 {
  height: 0.625rem;
  clear: both;
}

#package_goods {
  padding-bottom: 3.75rem;

  #content {
    .banner {
      width: 100%;
      overflow: hidden;
      background: #f5f5f5;
      position: relative;

      img {
        width: 100%;
        display: block;
      }
    }

    .content_a {
      background: #fff;

      .rob-time {
        display: flex;
        height: 3.0625rem;
        background-color: #f15353;

        .img {
          width: 10%;

          img {
            width: 60%;
          }
        }

        .price {
          text-align: left;
          width: 10%;
          display: flex;
          color: #fff;

          .text {
            font-size: 0.875rem;
            margin-top: 0.4375rem;
            margin-left: -0.125rem;
          }

          .none-line {
            line-height: 3.0625rem;
            font-size: 1.125rem;
            margin-left: 0.625rem;
          }

          .middle-line {
            line-height: 3.0625rem;
            font-size: 14px;
            text-decoration: line-through;
            color: #dbdbdb;
            margin-left: 0.625rem;
          }
        }

        .time {
          flex: 80%;
          text-align: left;
          line-height: 3.0625rem;
          padding-left: 1.25rem;
          display: flex;
          align-items: center;

          .text {
            font-size: 0.875rem;
            line-height: 1.5rem;
          }

          span {
            color: #fff;
            font-size: 0.875rem;
          }

          em {
            background-color: #fff;
            color: #333;
          }

          .bottom {
            margin-top: 0.125rem;
          }
        }
      }

      h1 {
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: left;
        padding: 0 0.875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }
    }

    .content_nav {
      // background: #fff;
      margin:0 0rem 0.625rem 0rem;
      // border-bottom: solid 0.0625rem #ebebeb;

      .nav {
        display: flex;
        height: 2.625rem;
        line-height: 2.625rem;

        li {
          font-size: 1rem;
          margin: 0 0.75rem;
          font-weight: bold;
        }

        .cur {
          color: #f15353;
          border-bottom: solid 0.125rem #f15353;
        }
      }
    }

    .content_c {
      background: #fff;
      margin: 0 0.75rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;

      h3 {
        display: inline-block;
        padding:0.625rem 0.0625rem 0rem 0.25rem;
        font-size: 1.125rem;
        font-weight: bold;
        color: #00001C;
        position: relative;
        z-index: 10;
        &::after {
          content:'';
          position: absolute;
          width:100%;
          height: 0.3125rem;
          border-radius: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
          left:0;
          bottom:0rem;
          background: linear-gradient(90deg, #F15353 0%, #FFFFFF 100%);
          z-index: -1;
        }
      }

      .c_box {
        .goods_box {
          display: flex;
          flex-direction: column;

          .select {
            // width: 2.125rem;
            padding:0 6px 0 12px;
          }

          .goods_info {
            .info_a {
              display: flex;
              padding:1.25rem 0 0 0;
              .img {
                width: 6rem;
                height: 6rem;
                overflow: hidden;
                background: #f5f5f5;
                margin-right: 0.625rem;
                border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
                img {
                  width: 100%;
                }
              }

              .info {
                width: 12.625rem;
                text-align: left;
                padding:0 0.75rem 0 0;
                box-sizing: border-box;

                .name {
                  // font-size: 16px;
                  max-height: 2.5rem;
                  // line-height: 1.25rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;

                  font-size: 14px;
                  line-height: 18px;
                  font-weight: 500;
                  color: #00001C;
                }
                .price-box {
                  padding:0.75rem 0 0 0;
                }
                .price {
                  // line-height: 1.875rem;
                  span {
                    display: block;
                  }
                  font-size: 1rem;
                  color: #F15353;
                  line-height: 18px;

                  .left {
                    color: #f15353;
                    font-size: 1rem;
                    font-weight: bold;
                    margin-right: 0.625rem;

                    font {
                      font-size: 12px;
                    }
                  }

                  .right {
                    color: #8c8c8c;
                    font-size: 0.75rem;
                    text-decoration: line-through;
                  }
                }

                .member {
                  display: flex;
                  align-items: flex-end;
                  justify-content: space-between;
                  span {
                    font-size: 1rem;
                    line-height: 1rem;
                  }
                }
              }
              .info-pm {
                padding:0;
              }
            }
            .info-page {
              padding: 0.9375rem 0 0 0.75rem;
            }
          }
          .goods-specs {
            padding:1.125rem 0rem 1.25rem 0;
            margin:0 0.9375rem 0 2.125rem;
            border-bottom: 0.0625rem solid #F0F0F1;
            cursor: pointer;
            h4 {
              font-weight: 500;
              color: #00001C;
              font-size: 0.875rem;
            }
            .specs-title {
              font-size: 0.8125rem;
              font-weight: 400;
              color: #6E6E79;
              &:last-child {
                font-size: 0.8125rem;
                color: #6E6E79;
              }
              .icon-icon_more1 {
                color:#AAAAB3;
                font-size: 0.8125rem;
              }
            }
          }

          .goods-line {
            border-bottom: 0.0625rem solid #F0F0F1;
            margin:0 0.75rem 0 0.75rem;
            padding:0.9375rem 0rem 0rem 0;
          }
        }
        &:last-child {
          .goods_box {
              &:last-child {
              .specs-40 {
                height: 0.9375rem;
                clear: both;
              }
            }
          }
        }
      }
    }
    .categories-page {
      padding:10px 0 0 0;
    }
    .content-page {
      padding:0;
      border-radius:0px;
      &:last-child {
        border-radius: 0px 0px 8px 8px;
          .goods_box {
              &:last-child {
              .goods-line {
                border-bottom:none;
              }
          }
        }
      }
      &:first-child {
        border-radius: 8px 8px 0px 0px ;
      }
    }

    .content_d {
      margin:10px 12px 0 12px;
      background: #fff;
      border-radius: 8px 8px 8px 8px;

      h5 {
        padding:13px  0 0  0;
        text-align: center;
        font-size: 18px;
        line-height: 18px;
        font-weight: bold;
        color: #00001C;
      }

      .d_box {
        .goods_box {
          // border-bottom: solid 0.0625rem #ebebeb;
          padding: 0.875rem 0.625rem;
          display: flex;

          .img {
            width: 6rem;
            height: 6rem;
            overflow: hidden;
            background: #f5f5f5;
            margin-right: 0.625rem;
            border-radius: 8px 8px 8px 8px;
            img {
              width: 100%;
            }
          }

          .info {
            width: 15rem;
            padding:0 0.9375rem 0 0;
            box-sizing: border-box;
            text-align: left;

            .info_a {
              font-size: 0.875rem;
              font-weight: 500;
              color: #00001C;
              max-height: 2.5rem;
              line-height: 1.25rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .info_b {
              font-size: 1rem;
              color: #f15353;
              margin-top: 0.625rem;
              font-weight: bold;

            }
          }
        }
      }
    }

    .fixed {
      position: fixed;
      bottom: 0;
      width: 23.4375rem;
      height: 3.0625rem;
      line-height: 3.0625rem;
      background: #fff;
      box-shadow: 0 -0.0625rem 0.25rem rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: flex-end;
      z-index: 12;
      .favourable {
        position: absolute;
        left: 0.625rem;
      }

      .buyBtn {
        padding: 0.8125rem 1.75rem;
        line-height: 0.9375rem;
        border-radius: 1.3125rem 1.3125rem 1.3125rem 1.3125rem;
        background: #f15353;
        font-size: 0.9375rem;
        // height: 1.625rem;
        display: flex;
        justify-content: center;
        align-self: center;
        border: solid 0.0313rem #ff2c29;
        color: #fff;
        margin-right: 0.625rem;
        cursor: pointer;
      }

      .price {
        display: flex;
        align-items: center;
        padding-right: 0.625rem;
        font-size: 0.875rem;

        span {
          font-size: 18px;
          color: #f15353;

          font {
            font-size: 0.875rem;
          }
        }
      }
    }
    .fixed-exchange {
      justify-content:flex-start;
    }

    .van-tabs--line.show {
      position: fixed;
      top: 0;
      z-index: 99;
      width: 100%;
      background-color: #fff;
    }
  }
}
//新样式

.header-main {
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  background: #FFFFFF;
  padding:0.75rem;
  margin:0.625rem 0.75rem 0rem 0.75rem;
  h3 {
    font-size: 1rem;
    font-weight: bold;
    color: #00001C;
    line-height: 1.25rem;
    text-align: left;
    white-space: normal;
    word-break: break-all;
  }
  .header-desc {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding:0.625rem 0.875rem 0.875rem 0.875rem;
    border: 0.0625rem solid #F0F0F1;
    margin:1rem 0 0 0;
    .header-user {
      width:80%;
      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        margin:0;
      }
      h3 {

        font-size: 1rem;
        line-height: 1.125rem;
        padding:0 0 0 0.3125rem;
        text-align: left;
        font-weight: 500;
        color: #00001C;
      }
    }
    .symbol {
      padding:0 0.625rem 0 0;
      // flex:1;
      // display: table-cell;
		  // vertical-align: middle;
      .icon-yinhao {
        font-size: 1.375rem;
      }
      span {
        // font-size: 4.375rem;
        color: #F0F0F1;
      }
    }
  }

  .detail {
    padding:0.4375rem 0 0 0;
    font-size: 0.8125rem;
    color: #6E6E79;
    line-height: 1.25rem;
    text-align: left;
  }
}
.exchange {
  width: 21.875rem;
  margin:0 0.75rem;
}

</style>
